<!DOCTYPE html>
<html lang="en">
<head>
<title>Contacts</title>
<meta charset="utf-8">
<meta name = "format-detection" content = "telephone=no" />
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/contact-form.css" media="screen">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>

<script src="js/superfish.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/script.js"></script> 

<script src="js/TMForm.js"></script>
<script src="js/modal.js"></script>

<script src="js/jquery.ui.totop.js"></script>
<script src="js/tweens.js"></script>

<script>
 $(window).load(function(){
  $().UItoTop({ easingType: 'easeOutQuart' });
  
 }); 
</script>
<!--[if lt IE 8]>
 <div style=' clear: both; text-align:center; position: relative;'>
   <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
     <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
   </a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
</head>

<body>
  <div class="main">
<!--==============================
              header
=================================-->
  <header>
<section id="stuck_container">
  <!--==============================
              Stuck menu
  =================================-->
    <div class="container">
      <div class="row">
        <div class="grid_12 rel">
          <h1>
            <a href="index.html">
              <img src="images/logo.png" alt="Logo alt">
            </a>
          </h1>
           <form id="search" action="search.php" method="GET">
            <div class="rel">
              <label>
                <input type="text" name="s" value="">
              </label>
              <a onClick="document.getElementById('search').submit()" class="fa  fa-search"></a>
            </div>
             <div class="clear"></div>
           </form>
          <div class="navigation ">
            <nav>
              <ul class="sf-menu">
               <li><a href="index.html">Home</a></li>
               <li><a href="index-1.html">About Us</a>
                 <ul>
                    <li><a href="#">Vestibulum iaculis</a></li>
                    <li><a href="#">Fusce euismod conuat</a>
                      <ul>
                        <li><a href="#">Pellentesque sed</a></li>
                        <li><a href="#">Aliquam congue ferm</a></li>
                        <li><a href="#">Mauris accum</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Pellentesque</a></li>
                 </ul>
               </li>
               <li><a href="index-2.html">Services</a></li>
               <li><a href="index-3.html">Projects</a></li>
               <li class="current"><a href="index-4.html">Contacts</a></li>
               <li><a href="index-5.html">Blog</a></li>
             </ul>
            </nav>
        
            <div class="clear"></div>
          </div>       
         <div class="clear"></div>  
        </div>
     </div> 
    </div> 
    </section>
  </header>

<!--=====================
          Content
======================-->
<section class="content">
  <div class="container">
    <div class="row">
      <div class="grid_6">
        <h3>contact us</h3>      
        <div class="map">
              <figure class="">
              <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d24214.807650104907!2d-73.94846048422478!3d40.65521573400813!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1395650655094" style="border:0"></iframe>
              </figure>
              <address class="address1">
              <dl>
                  <dt class="text1">
                      8901 Marmora Road,<br>Glasgow, D04 89GR.
                  </dt>
                  <dd><span>Freephone:</span>+1 800 559 6580</dd>
                  <dd><span>Telephone:</span>+1 800 603 6035</dd>
                  <dd><span>FAX:</span>+1 800 889 9898</dd>
                  <dd><span>E-mail:</span><a href="#" class="color1">mail@demolink.org</a></dd>
              </dl>
              </address>
             
            </div>
      </div>
      <div class="grid_5">
        <h3>get in touch</h3>
        <form id="contact-form">
          <div class="contact-form-loader"></div>
          <fieldset>
            <label class="name">
              <input type="text" name="name" placeholder="Name*:" value="" data-constraints="@Required @JustLetters"  />
              <span class="empty-message">*This field is required.</span>
              <span class="error-message">*This is not a valid name.</span>
            </label>
            <!-- <label class="state">
              <input type="text" name="state" placeholder="State:" data-constraints="@JustLetters" />
              <span class="empty-message">*This field is required.</span>
              <span class="error-message">*This is not a valid state.</span>
            </label> -->
            <label class="email">
              <input type="text" name="email" placeholder="Email*:" value="" data-constraints="@Required @Email" />
              <span class="empty-message">*This field is required.</span>
              <span class="error-message">*This is not a valid email.</span>
            </label>
            <label class="phone">
              <input type="text" name="phone" placeholder="Telephone:" value="" data-constraints="@Required @JustNumbers" />
              <span class="empty-message">*This field is required.</span>
              <span class="error-message">*This is not a valid phone.</span>
            </label>
            <!-- <label class="fax">
              <input type="text" name="fax" placeholder="Fax:" data-constraints="@JustNumbers" />
              <span class="empty-message">*This field is required.</span>
              <span class="error-message">*This is not a valid fax.</span>
            </label> 
            <label class="file">
              <input type="file" name="attachment" class="filestyle file-input" data-input="true" >
              <span class="empty-message">*This field is required.</span>
              <span class="error-message">*This is not a valid file.</span>
            </label>-->
            <label class="message">
              <textarea name="message" placeholder="Message*:" data-constraints='@Required @Length(min=20,max=999999)'></textarea>
              <span class="empty-message">*This field is required.</span>
              <span class="error-message">*The message is too short.</span>
            </label>
            <!-- <label class="recaptcha"><span class="empty-message">*This field is required.</span></label> -->
            <div>
              <a href="#" class="btn" data-type="reset"><span data-content="clear">clear</span>
                <div class="fa fa-angle-double-right"></div>
              </a>
              <a href="#" class="btn" data-type="submit"><span data-content="submit">submit</span>
            <div class="fa fa-angle-double-right"></div>
              </a>
              
            </div>
          </fieldset> 
          <div class="modal fade response-message">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                  You message has been sent! We will be in touch soon.
                </div>      
              </div>
            </div>
          </div>
        </form>

      </div>
    </div>
  </div>
</section>
<!--==============================
              footer
=================================-->
<footer id="footer">
  <div class="footer_top">
    <div class="container">
      <div class="row">
        <div class="grid_5 anim_left">
          <h4>Get in touch</h4>
          <div class="row">
            <div class="grid_3">
              <address class="f_address">
                <p>8901 Marmora Road <br>
                Glasgow, DO4 89GR.<br>
                <span>Freephone:</span>  +1 800 559 6580<br>
                <span>Telephone:</span>   +1 959 603 6035<br>
                <span>FAX:</span>            + 1 504 889 9898</p>

                E-mail: <a href="#">mail@demolink.org</a>
              </address>
            </div>
            <div class="grid_2">
              <ul class="f_menu">
               <li><a href="index.html">Home</a></li>
               <li><a href="index-1.html">About us</a></li>
               <li><a href="index-2.html">Services</a></li>
               <li><a href="index-3.html">Projects</a></li>
               <li class="current"><a href="index-4.html">Contacts</a></li>
               <li><a href="index-5.html">Blog</a></li>
             </ul>
            </div>
          </div>
        </div>
        <div class="grid_4 ">
          <h4>Follow us</h4>
          <div class="footer_socials">
            <a href="#" class="fa fa-google-plus"></a>
            <a href="#" class="fa fa-twitter"></a>
            <a href="#" class="fa fa-facebook"></a>
            <a href="#" class="fa fa-pinterest"></a>
            <a href="#" class="fa fa-linkedin"></a>
          </div>
        </div>
        <div class="grid_3 anim_right">
          <h4>Join our newsletter</h4>
          
          <p>And always stay informed of the latest science news and events!</p>
          <a href="#" class="btn"><span data-content="Sign up">Sign up</span>
            <div class="fa fa-angle-double-right"></div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="grid_12">  
         <div class="copyright"> &copy; <span id="copyright-year"></span> Science Lab.  <a href="index-6.html">Privacy Policy</a> 
         </div>
      </div>
    </div>
  </div>  
</footer>
</div>
</body>
</html>

